<template>
  <div>
    <!-- 头图 -->
    <Toptheme
      imgUrl="toppic02"
      height="350px"
      des1="行业经典案例"
      des2="橙券与企业深度融合，创造数字化未来"
    ></Toptheme>
    <!-- 内容 -->
    <div class="content w1200">
      <div class="case-contnet flex" v-for="item in caseList" :key="item.id">
        <img :src="$utils.getImg(item.imgUrl)" :alt="item.imgUrl" />
        <div class="case-list">
          <h1 class="fz22">{{ item.industry }}</h1>
          <ul>
            <li v-for="i in item.items" :key="i.id">
              <h3 class="fz20">{{ i.title }}</h3>
              <p class="fz14">
                {{ i.content }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Toptheme from '@/components/top-theme/index.vue'
import { ref } from 'vue'
defineOptions({
  name: 'CasePage',
  components: {
    Toptheme
  }
})
const caseList = ref([
  {
    id: 1,
    industry: '金融行业',
    imgUrl: 'case01',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content:
          '中国银联、中国农业银行、中国邮政储蓄银行、中国银行、中国工商银行、交通银行、浦发银行、哈银消费金融公司、51信用卡'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙金融'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券为客户搭建营销活动，银行的手机银行及网银用户可通过参与活动，获得不同频次抽奖礼券，凭抽奖礼券随机抽取话费、流量、星巴克等奖品，打造具有生动营销力的传播。'
      }
    ]
  },
  {
    id: 2,
    industry: '互联网行业',
    imgUrl: 'case02',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content: '腾讯、京东PLUS、支付宝、搜狐邮箱、好时巧克力、乐麦'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙营销'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券为品牌线上商城旗舰店提供权益商品和技术支撑，多种选择，稳定货源支持，充分调动用户参与积极性，与用户形成良好互动，拉新促销，驱动企业业绩提升。'
      }
    ]
  },
  {
    id: 3,
    industry: '保险行业',
    imgUrl: 'case03',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content: '中邮人寿、中德安联人寿、壹钱包'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙营销、橙金融'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券，为保险行业客户策划精准有冲击力的营销活动，同时兼顾品牌信息传递和用户习惯的完美平衡，创意提供多面值话费、卡券产品等，覆盖更广泛的目标人群，实现流量快速转换。'
      }
    ]
  },
  {
    id: 4,
    industry: '通信行业',
    imgUrl: 'case04',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content: '中国联通'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙积分'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券充分整合360°客户视图，为联通的积分商城提供网票网、货拉拉、e袋洗等优质权益商品，并保障源源不断上新。用户在线兑换心仪商品，丰富且实用，有效提升用户个性化体验，充分发挥积分的价值。'
      }
    ]
  },
  {
    id: 5,
    industry: '汽车行业',
    imgUrl: 'case05',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content: '重庆长安汽车'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙积分'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券，是长安商城积分兑换业务的提供商之一，为商城用户提供中石化加油卡充值与话费充值服务，让用户有了新的兑换选择，有助于用户留存，加强用户对品牌的友好度，快速提升品牌曝光度和流量。'
      }
    ]
  },
  {
    id: 6,
    industry: '传媒行业',
    imgUrl: 'case06',
    items: [
      {
        id: 'a',
        title: '合作对象',
        content: '华数传媒、中科数创、瑞安日报、山东广播电视台'
      },
      {
        id: 'b',
        title: '品牌支持',
        content: '橙营销'
      },
      {
        id: 'c',
        title: '服务内容',
        content:
          '橙券助力媒体行业深度营销，以数据产品的复合运用，实现程序化精准营销服务，根据品牌形象定制不同的视觉风格，形成具有互动性的曝光传播，帮助企业实现。'
      }
    ]
  }
])
</script>

<style lang="scss" scoped>
.content {
  margin-top: 90px;
  .case-contnet {
    padding-bottom: 90px;
    .case-list {
      padding-left: 100px;
      color: #666;
      font-size: 14px;
    }
    h1 {
      margin-bottom: 50px;
      color: #21a3f1;
    }
    h3 {
      position: relative;
      margin-bottom: 10px;
      padding-left: 16px;
      &::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 3px;
        height: 23px;
        background-color: #21a3f1;
      }
    }
    li {
      margin-bottom: 60px;
    }
  }
}
</style>
